<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>评分组件 - layui</title>
    <link rel="stylesheet" href="../src/css/layui.css">
  </head>
  <body>
    <div class="layui-container layui-padding-3">
      <div class="layui-row">
        <div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4">
          <h3>基础用法</h3>
          <div id="test1"></div>
        </div>
        <div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4">
          <h3>选中半星</h3>
          <div id="test2"></div>
        </div>
        <div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4">
          <h3>显示文本</h3>
          <div id="test3"></div>
          <span></span>
        </div>
        <div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4">
          <h3>设置只读</h3>
          <div id="test4"></div>
        </div>
      </div>
    </div>

    <script src="../src/layui.js"></script>
    <script>
      layui.use(['rate', 'layer'], function(){
        var rate = layui.rate;
        var layer = layui.layer;

        // 基础用法
        var inst = rate.render({
          elem: '#test1',
          length: 5,
          value: 5,
          text: true,
          setText: function(value) { // 设置自定义文本
            var obj = {
              '1': '极差',
              '2' : '差',
              '3': '一般',
              '4': '满意',
              '5': '极满意'
            };
            this.span.text(obj[value] || value);
          }
        });

        // 选中半星
        rate.render({
          elem: '#test2',
          length: 6,
          value: 2,
          half: true,
          theme: '#5FB878',
          choose: function(value) {
            if( value > 3) {
              layer.tips("超过 3 星", this.elem);
            }
          }
        })

        // 显示文本
        rate.render({
          elem: '#test3',
          length: 3,
          value: 2.8,
          text: true,
          half: true,
          theme: '#FF5722'
        });

        // 设置只读
        rate.render({
          elem: '#test4',
          value: 3.5,
          half: true,
          readonly: true
        })
      });
    </script>
  </body>
</html>
